//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import React, {
	PureComponent,
	Fragment
} from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { getNodeByNameAndCallbackProcess } from '@/components/_utils/algorithmTools';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Select,
	Icon,
	Button,
	Modal,
	message,
	Divider,
	Table,
	DatePicker,
  Tabs,
  Timeline
} from 'antd';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Js2WordCloud from 'js2wordcloud';
import HistogramCharts from './histogramCharts';
import PieCharts from './pieCharts';
import styles from './ProUserList.less';
import {getValue} from '@/utils/globalcommon';
import {initTotalList} from '@/utils/globalcommon';
import policeDraw from '@/assets/policedraw.jpg';
import PoliceCharts from '@/components/PoliceCharts';
import RadarCharts from './radarCharts';
const FormItem = Form.Item;
const { Option } = Select;
const { confirm } = Modal;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const nldata = [
          {
            x: '20岁以下',
            y: 10,
          },
          {
            x: '20岁-30岁',
            y: 60,
          },
          {
            x: '30岁-40岁',
            y: 40,
          },
          {
            x: '40岁-50岁',
            y: 45,
          },
          {
            x: '50岁-60岁',
            y: 80,
          },
          {
            x: '60岁以上',
            y: 28,
          }

        ]

 const zwdata = [
       {
         x: '省部级正职',
         y: 10,
       },
       {
         x: '省部级副职',
         y: 20,
       },
       {
         x: '厅局级正职',
         y: 7,
       },
       {
         x: '厅局级副职',
         y: 14,
       },
       {
         x: '县处级正职',
         y: 19,
       },
       {
         x: '县处级副职',
         y: 16,
       },
     ]

     const zwcolumnBar = ['上届','本届'];

     const zwdataBar = [
         { label: "省部级正职", 本届: 18, 上届: 15},
         { label: "省部级副职", 本届: 30, 上届: 28},
         { label: "厅局级正职", 本届: 40, 上届: 30},
         { label: "厅局级副职", 本届: 50, 上届: 40},
         { label: "县处级正职", 本届: 80, 上届: 70},
         { label: "县处级副职", 本届: 100, 上届: 90},
     ]

     const nlcolumnBar = ['上届','本届'];

     const nldataBar = [
         { label: "20岁以下", 本届: 18, 上届: 15},
         { label: "20岁-30岁", 本届: 30, 上届: 28},
         { label: "30岁-40岁", 本届: 40, 上届: 30},
         { label: "40岁-50岁", 本届: 50, 上届: 40},
         { label: "50岁-60岁", 本届: 80, 上届: 70},
         { label: "60岁以上", 本届: 100, 上届: 90},
     ]

     const jxcolumnBar = ['上届','本届'];

     const jxdataBar = [
         { label: "一级警监", 本届: 18, 上届: 15},
         { label: "二级警监", 本届: 30, 上届: 28},
         { label: "三级警监", 本届: 40, 上届: 30},
         { label: "一级警督", 本届: 50, 上届: 40},
         { label: "二级警督", 本届: 80, 上届: 70},
         { label: "三级警督", 本届: 100, 上届: 90},
         { label: "一级警司", 本届: 130, 上届: 100},
         { label: "二级警司", 本届: 160, 上届: 130},
     ]

     const xlcolumnBar = ['上届','本届'];

     const xldataBar = [
         { label: "大学", 本届: 18, 上届: 15},
         { label: "大专", 本届: 30, 上届: 28},
         { label: "中专", 本届: 40, 上届: 30},
     ]

  const jxdata = [
        {
          x: '一级警司',
          y: 16,
        },
        {
          x: '二级警司',
          y: 37,
        },
        {
          x: '一级警督',
          y: 23,
        },
        {
          x: '二级警督',
          y: 14,
        },
        {
          x: '三级警督',
          y: 26,
        },
        {
          x: '一级警监',
          y: 16,
        },
        {
          x: '二级警监',
          y: 29,
        },
        {
          x: '三级警监',
          y: 56,
        },
      ]

    const xldata = [
          {
            x: '大学',
            y: 102,
          },
          {
            x: '大专',
            y: 35,
          },
          {
            x: '中专',
            y: 15,
          }
        ]


    const defs = [
      {
        dataKey: 'y',
        min: 0,
      },
      {
        dataKey: 'x',
      },
    ];




    const nlcolumns = [
      {
        title: '年龄',
        dataIndex: 'x',
      },
      {
        title: '人数',
        dataIndex: 'y',
      },
    ];

    const zwcolumns = [
      {
        title: '职务',
        dataIndex: 'x',
      },
      {
        title: '人数',
        dataIndex: 'y',
      },
    ];

    const jxcolumns = [
      {
        title: '警衔',
        dataIndex: 'x',
      },{
        title: '人数',
        dataIndex: 'y',
      }
    ]

    const xlcolumns = [
      {
        title: '学历',
        dataIndex: 'x',
      },{
        title: '人数',
        dataIndex: 'y',
      }
    ]



    const leaderList = [

      {address:"西陵峡二街88号-11-3", warning_sign:641689,police_rank:"一级警督",nation:"汉族", idcard:13092419680913, person_type:"机关工勤人员", order_number:"1", sex:"男", name:"陈某", marriage_type:"已婚", email:"6a6isrqe0hsa@0355.net",work_unit: "技术侦察总队",post:"省委常委",rank:"一级警长"},
      {address:"逍遥一街12号-16-8", warning_sign:964588, police_rank:"二级警督",nation:"裕固族", idcard:13092419680913, person_type:"机关工勤人员", order_number:"2", sex:"男", name:"王某", marriage_type:"已婚", email:"f3m1z60jeel7@live.com",work_unit: "技术侦察总队",post:"校长",rank:"二级警务专员"},
      {address:"丹东街52号-19-8", warning_sign:112757, police_rank:"未授衔",nation:"裕固族", idcard:13092419680913, person_type:"事业单位工勤人员", order_number:"3", sex:"男", name:"宋某", marriage_type:"未婚", email:"e88yjwj704kfkr7l@hotmail.com",work_unit: "技术侦察总队",post:"市委常委",rank:"二级警长"},
      {address:"锦州街117号-5-1", warning_sign:270099, police_rank:"未授衔",nation:"塔吉克族", idcard:13092419680913, person_type:"企业工勤人员", order_number:"4", sex:"女", name:"李某", marriage_type:"已婚", email:"bz6x3h5w49l7@0355.net",work_unit: "技术侦察总队",post:"校长",rank:"一级警务专员"},
      {address:"西康街19号-9-4", warning_sign:515502, police_rank:"未授衔",nation:"彝族", idcard:13092419680913, person_type:"参照管理的事业工作人员", order_number:"5", sex:"男", name:"张某", marriage_type:"未婚", email:"11hjnjzjs9muluklqg@googlemail.com",work_unit: "行政管理处",post:"市委常委",rank:"二级警长"},

    ]

/* eslint react/no-multi-comp:0 */
@connect(({
	lawpolicy,
	loading
}) => ({
	lawpolicy,
	loading: loading.models.lawpolicy,
}))

@Form.create()
class ProLeaderDrawList extends PureComponent {
	state = {
    modalVisible: false,
    modalVisibleByWork: false,
		expandForm: false,
		selectedRows: [],
		formValues: {},
		updateFormValues: {},
		viewFormValues: {},
		requestModelName:"lawpolicy",
		currentPage: 1,
		pageSize: 10,
	};


  columns = [
        {
          title: '序号',
          dataIndex: 'order_number',
          key: 'order_number',
        },  {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        }, 	{
          title: '性别',
          dataIndex: 'sex',
          key: 'sex',
        },  {
          title: '民族',
          dataIndex: 'nation',
          key: 'nation',
        },  {
          title: '人员类别',
          dataIndex: 'person_type',
          key: 'person_type',
        },  {
          title: '居民身份证',
          dataIndex: 'idcard',
          key: 'idcard',
        }, {
          title: '警衔',
          dataIndex: 'police_rank',
          key: 'police_rank',
        }, {
          title: '警号',
          dataIndex: 'warning_sign',
          key: 'warning_sign',
        }, {
          title: '籍贯',
          dataIndex: 'address',
          key: 'address',
        }
  ];

  //警衔弹窗显示
  handleModalByVisible = flag => {
  	this.setState({
  		modalVisible: !!flag,
  	});
  };

  //工作经历弹窗显示
  handleModalByWork = flag => {
  	this.setState({
  		modalVisibleByWork: !!flag,
  	});
  };



	componentDidMount() {
      var canvasleader = document.getElementById('canvasleader');
      const _this = this;
          //生成

          var wc = new Js2WordCloud(canvasleader);
          wc.setOption({
              tooltip: {
                show: true,
              },
              list: [['李某', 10], ['人民警察', 9], ['一级警督', 8], ['一级警长', 7],['事业编制', 6],['统一招录', 5], ['综合管理警官', 5],['已婚', 5],['50岁', 4],['本科', 4], ['荣获嘉奖五次', 4],['中共党员', 4],['汉族', 3],['男', 3]],
              color: 'random-light',
              // ellipticity: 1,
              // shape:"ellipse",
              backgroundColor: 'rgba(255,255,255,0)',
              // imageShape: 'https://liangbizhi.github.io/js2wordcloud/shape/twitter.png',
              // imageShape: '//cdn.weimob.com/saas/zhan/images/4.21/tuoyuna.png',
              weightFactor: 40,
              fontSizeFactor: 0.1,  // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
              maxFontSize: 40, // 最大fontSize，用来控制weightFactor，默认60
              minFontSize: 20,
              rotateRatio: 0,
              gridSize: 41,
              click(item, dimension, event) { //支持点击事件
                  console.log(item);
                  if(item[0] == "一级警督") {
                      _this.handleModalByVisible(true);
                  }else if(item[0] == "李某") {
                      _this.handleModalByWork(true);
                  }
              }
          })
	}


	renderSimpleForm() {
		const {
			form: {
				getFieldDecorator
			}
		} = this.props;
		return(
		<Form onSubmit={this.handleSearch} layout="inline">
	      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				<Col md={8} sm={24}>
		        	<FormItem label="法律政策规定">
		        		{getFieldDecorator('lawpolicy')(<Input placeholder="请输入" />)}
					</FormItem>
	    		</Col>
		    	<Col md={8} sm={24}>
			        <FormItem label="实施时间">
				        {getFieldDecorator('starttime')(
				        	<RangePicker format={"YYYY-MM-DD"} style={{ width: '100%' }} placeholder={['开始时间', '结束时间']} />
				        )}
			    	</FormItem>
			    </Col>
			    <Col md={8} sm={24}>
			        <span className={styles.submitButtons}>
			        <Button type="primary" htmlType="submit">
			        	查询
			        </Button>
			        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
			        	重置
			        </Button>
			        {/*<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
			        	展开 <Icon type="down" />
			        </a>*/}
			        </span>
		        </Col>
	        </Row>
        </Form>
		);
	}

	renderAdvancedForm() {
		const {
			form: {
				getFieldDecorator
			}
		} = this.props;
		return(
			<Form onSubmit={this.handleSearch} layout="inline">
		      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					<Col md={8} sm={24}>
			        	<FormItem label="法律政策规定">
			        		{getFieldDecorator('flzcgd')(<Input placeholder="请输入" />)}
						</FormItem>
		    		</Col>
			    	<Col md={8} sm={24}>
				        <FormItem label="实施时间">
					        {getFieldDecorator('starttime')(

					        	<RangePicker format={"YYYY-MM-DD"} style={{ width: '100%' }} placeholder={['开始时间', '结束时间']} />

					        )}
				    	</FormItem>
				    </Col>
		    	</Row>
			    <div style={{ overflow: 'hidden' }}>
					<div style={{ marginBottom: 24 }}>
					<Button type="primary" htmlType="submit">
			        查询
			        </Button>
			        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
			        重置
			        </Button>
			        <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
			        收起 <Icon type="up" />
			        </a>
		        	</div>
		        </div>
        </Form>
		);
	}

	renderForm() {
		const {
			expandForm
		} = this.state;

		return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
	}

  callback = (key) => {
    console.log(key);
  }

	render() {
		const {
			loading,
		} = this.props;

		const {
			modalVisibleByWork,
			modalVisible,
		} = this.state;

    const dataByPoliceRank = [
       {
         year: "1990",
         rank: "二级警员"
       },
       {
         year: "1991",
         rank: "二级警员"
       },
       {
         year: "1992",
         rank: "二级警员"
       },
       {
         year: "1993",
         rank: "二级警员"
       },
       {
         year: "1994",
         rank: "一级警员"
       },
       {
         year: "1995",
         rank: "一级警员"
       },
       {
         year: "1996",
         rank: "一级警员"
       },
       {
         year: "1997",
         rank: "一级警员"
       },
       {
         year: "1998",
         rank: "三级警司"
       },
       {
         year: "1999",
         rank: "三级警司"
       },
       {
         year: "2000",
         rank: "三级警司"
       },
       {
         year: "2001",
         rank: "三级警司"
       },
       {
         year: "2002",
         rank: "三级警司"
       },
       {
         year: "2003",
         rank: "二级警司"
       },
       {
         year: "2004",
         rank: "二级警司"
       },
       {
         year: "2005",
         rank: "二级警司"
       },
       {
         year: "2006",
         rank: "二级警司"
       },
       {
         year: "2007",
         rank: "一级警司"
       },
       {
         year: "2008",
         rank: "一级警司"
       },
       {
         year: "2009",
         rank: "一级警司"
       },
       {
         year: "2010",
         rank: "三级警督"
       },
       {
         year: "2011",
         rank: "三级警督"
       },
       {
         year: "2012",
         rank: "三级警督"
       },
       {
         year: "2013",
         rank: "三级警督"
       },
       {
         year: "2014",
         rank: "二级警督"
       },
       {
         year: "2015",
         rank: "二级警督"
       },
       {
         year: "2016",
         rank: "二级警督"
       },
       {
         year: "2017",
         rank: "二级警督"
       },
       {
         year: "2018",
         rank: "二级警督"
       },
       {
         year: "2019",
         rank: "一级警督"
       },

     ];

     const dataByRank = [
        {
          year: "1990",
          rank: "二级科员"
        },
        {
          year: "1991",
          rank: "二级科员"
        },
        {
          year: "1992",
          rank: "二级科员"
        },
        {
          year: "1993",
          rank: "二级科员"
        },
        {
          year: "1994",
          rank: "一级科员"
        },
        {
          year: "1995",
          rank: "一级科员"
        },
        {
          year: "1996",
          rank: "一级科员"
        },
        {
          year: "1997",
          rank: "一级科员"
        },
        {
          year: "1998",
          rank: "四级主任科员"
        },
        {
          year: "1999",
          rank: "四级主任科员"
        },
        {
          year: "2000",
          rank: "四级主任科员"
        },
        {
          year: "2001",
          rank: "四级主任科员"
        },
        {
          year: "2002",
          rank: "三级主任科员"
        },
        {
          year: "2003",
          rank: "三级主任科员"
        },
        {
          year: "2004",
          rank: "三级主任科员"
        },
        {
          year: "2005",
          rank: "二级主任科员"
        },
        {
          year: "2006",
          rank: "二级主任科员"
        },
        {
          year: "2007",
          rank: "二级主任科员"
        },
        {
          year: "2008",
          rank: "一级主任科员"
        },
        {
          year: "2009",
          rank: "一级主任科员"
        },
        {
          year: "2010",
          rank: "一级主任科员"
        },
        {
          year: "2011",
          rank: "一级主任科员"
        },
        {
          year: "2012",
          rank: "四级调研员"
        },
        {
          year: "2013",
          rank: "四级调研员"
        },
        {
          year: "2014",
          rank: "四级调研员"
        },
        {
          year: "2015",
          rank: "四级调研员"
        },
        {
          year: "2016",
          rank: "三级调研员"
        },
        {
          year: "2017",
          rank: "三级调研员"
        },
        {
          year: "2018",
          rank: "三级调研员"
        },
        {
          year: "2019",
          rank: "二级调研员"
        },

      ];

    const defs = [
      {
        dataKey: 'y',
        min: 0,
      },
      {
        dataKey: 'x',
      },
    ];

    const cols = {
      key: {
        tickInterval: 20
      }
    };

		return(
			<PageHeaderWrapper title="领导班子画像">
            <Modal
            	width={500}
            	centered
            	destroyOnClose
            	title="工作经历记录"
            	visible={modalVisibleByWork}
            	onCancel={()=> this.handleModalByWork()}
              footer={<Button key="back" onClick = {() => this.handleModalByWork()}>取消</Button>}
            	>
                    <Timeline>
                      <Timeline.Item color="green">1989-1993年 xx包头大队战士 </Timeline.Item>
                      <Timeline.Item color="green">1993-1996年 xx后勤处农场排职管理员</Timeline.Item>
                      <Timeline.Item color="green">1997-2001年 xx呼和浩特市大队管理员</Timeline.Item>
                      <Timeline.Item color="green">2001-2004年 xx后勤部战勤科副营职参谋</Timeline.Item>
                      <Timeline.Item color="green">2004-2008年 xx后勤部财务科正营职助理</Timeline.Item>
                      <Timeline.Item color="green">2008-2012年 xx后勤部财务科科长</Timeline.Item>
                      <Timeline.Item color="green">2012-2015年 xx后勤部副部长</Timeline.Item>
                      <Timeline.Item color="green">2015-2017年 xx公安厅指挥中心未定职</Timeline.Item>
                      <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">
                        2017-至今 xx公安厅指挥中心副调研员
                      </Timeline.Item>
                    </Timeline>

            </Modal>
            <Modal
            	width={500}
            	centered
            	destroyOnClose
            	title="警衔变动记录"
            	visible={modalVisible}
            	onCancel={()=> this.handleModalByVisible()}
              footer={<Button key="back" onClick = {() => this.handleModalByVisible()}>取消</Button>}
            	>
                    <Timeline>
                      <Timeline.Item color="green">1989年3月10日 授予二级警员警衔 </Timeline.Item>
                      <Timeline.Item color="green">1993年4月20日 晋升一级警员警衔</Timeline.Item>
                      <Timeline.Item color="green">1997年5月15日 晋升三级警司警衔</Timeline.Item>
                      <Timeline.Item color="green">2001年6月25日 晋升二级警司警衔</Timeline.Item>
                      <Timeline.Item color="green">2001年6月25日 晋升二级警司警衔</Timeline.Item>
                      <Timeline.Item color="green">2004年8月20日 晋升一级警司警衔</Timeline.Item>
                      <Timeline.Item color="green">2010年9月10日 晋升三级警督警衔</Timeline.Item>
                      <Timeline.Item color="green">2014年10月20日 晋升二级警督警衔</Timeline.Item>
                      <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">
                        2019年8月25日 晋升一级警督警衔
                      </Timeline.Item>
                    </Timeline>

            </Modal>
            <Card bordered={false}>
            <div className={styles.proUsertableList}>
                <div className={styles.proUsertableListOperator}>
                      <Tabs onChange={this.callback} type="card">
                        <TabPane tab="成员分析" key="1">
                            <Table
                              columns={this.columns}
                              dataSource={leaderList}
                            />
                            <div style={{position: 'absolute',height:'200px',top: '380px',left: '20px',zIndex: '1000'}}>
                                <RadarCharts />
                            </div>
                            <div style={{clear:"both"}}>
                                  <div style={{textAlign: 'center',marginLeft: '40px'}}>
                                    <img id="print"  alt="" src={policeDraw} style={{width: '70%'}}/>
                                  </div>
                                  <div className={styles.wordCloud}>
                                      <div id="canvasleader" style={{width:'500px',height:'400px'}}></div>
                                  </div>
                                  <Card title={<Button type="primary">民警工作经历</Button>} bordered={false} className={styles.workHistroy}>
                                    <p>1989-1993 xx包头大队战士</p>
                                    <p>1993-1996 xx后勤处农场排职管理员</p>
                                    <p>1997-2001 xx呼和浩特市大队管理员</p>
                                    <p>2001-2004 xx后勤部战勤科副营职参谋</p>
                                    <p>2004-2008 xx后勤部财务科正营职助理</p>
                                    <p>2008-2012 xx后勤部财务科科长</p>
                                    <p>2012-2015 xx后勤部副部长</p>
                                    <p>2015-2017 xx公安厅指挥中心未定职</p>
                                    <p>2017-至今 xx公安厅指挥中心副调研员</p>
                                  </Card>
                                  <Card title={<Button type="primary">民警荣誉奖励</Button>} bordered={false} className={styles.policeReward}>
                                    <p>2004年12月经xxx公安厅批准，个人二等功</p>
                                    <p>2007年1月经xxx公安局批准，个人三等功</p>
                                    <p>2008年7月经xxx公安厅批准，个人二等功</p>
                                    <p>2011年1月经xxx公安厅批准，其他荣誉称号</p>
                                    <p>2011年9月经xxx公安厅批准，个人二等功</p>
                                  </Card>
                                  <Card title={<Button type="danger">民警违规记录</Button>} bordered={false} className={styles.observeRules}>
                                    <p>李某-2019年10月20日在某十字路口闯红灯</p>
                                    <p>李某-2019年12月20日在某娱乐场所存在违规行为</p>
                                  </Card>
                                  <Card title={<Button type="danger">民警政治思想问题记录</Button>} bordered={false} className={styles.politicalAnalysis}>
                                    <p>李某存在非常严重xx问题</p>
                                    <p>李某存在严重xx问题</p>
                                    <p>李某存在比较严重xxx问题</p>
                                  </Card>
                                  <Card title={<Button type="danger">民警身体健康问题</Button>} bordered={false} className={styles.healthAnalysis}>
                                    <p>李某患有腿部残疾</p>
                                  </Card>
                                  <div className={styles.healthLine}></div>
                            </div>
                            <div style={{position: 'relative',marginTop: "80px"}}>
                                <div style={{marginLeft: '30px'}}>警衔</div>
                                <Chart height={400} data={dataByPoliceRank} scale={cols} forceFit>
                                  <Axis name="year" />
                                  <Axis name="rank" />
                                  <Tooltip
                                    // crosshairs用于设置 tooltip 的辅助线或者辅助框
                                    // crosshairs={{
                                    //  type: "y"
                                    // }}
                                  />
                                  <Geom type="line" position="year*rank"/>
                                      <Geom
                                        type="point"
                                        position="year*rank"
                                        size={4}
                                        shape={'circle'}
                                        style={{ stroke: '#fff', lineWidth: 1 }}
                                      />
                                </Chart>
                            </div>
                            <div style={{position: 'relative'}}>
                                <div style={{marginLeft: '30px'}}>职级</div>
                                <Chart height={400} data={dataByRank} scale={cols} forceFit>
                                  <Axis name="year" />
                                  <Axis name="rank" />
                                  <Tooltip
                                    // crosshairs用于设置 tooltip 的辅助线或者辅助框
                                    // crosshairs={{
                                    //  type: "y"
                                    // }}
                                  />
                                  <Geom type="line" position="year*rank"/>
                                      <Geom
                                        type="point"
                                        position="year*rank"
                                        size={4}
                                        shape={'circle'}
                                        style={{ stroke: '#fff', lineWidth: 1 }}
                                      />
                                </Chart>
                            </div>
                        </TabPane>
                        <TabPane tab="职务" key="2">
                          {/*<div className={styles.proUsertableListForm}>{this.renderForm()}</div>*/}
                          <div style={{float: 'left',width: '50%'}}>
                              <div>人数</div>
                              <PoliceCharts data={zwdataBar} text="队伍情况分析" defs={defs}  column={zwcolumnBar}  type={["histogram"]} height={280} txlx ='group' />
                          </div>
                          <div style={{float: 'right',width: '50%'}}>
                              <PieCharts data={zwdata} text="领导班子分析" />
                          </div>
                          <div style={{float: 'left',width: '49%',marginTop: '50px'}}>
                              <Card title="文本描述" style={{backgroundColor:'rgba(255,255,255,0)'}}>
                                  <div style={{marginLeft: 20}}>
                                  <h3>职务情况：</h3>
                                  {zwdata.map(item => (
                                    <p style={{marginLeft: 8,marginTop:10 }}>{item.x}：<span style={{color: '#009900'}}>{item.y}</span> 人 </p>
                                  ))}
                                  </div>
                              </Card>
                          </div>
                          <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                              <Card title="统计表"  style={{backgroundColor:'rgba(255,255,255,0)'}}>
                                  <Table columns={zwcolumns} dataSource={zwdata}/>
                              </Card>
                          </div>

                        </TabPane>
                        <TabPane tab="年龄" key="3">
                          <div style={{float: 'left',width: '50%'}}>
                              <div>人数</div>
                              <PoliceCharts data={nldataBar} text="队伍情况分析" defs={defs}  column={nlcolumnBar}  type={["histogram"]} height={280} txlx ='group' />
                          </div>
                          <div style={{float: 'right',width: '50%'}}>
                              <PieCharts data={nldata} text="领导班子分析" />
                          </div>
                          <div style={{float: 'left',width: '49%',marginTop: '50px'}}>
                              <Card title="文本描述">
                                  <div style={{marginLeft: 20}}>
                                  <h3>年龄情况：</h3>
                                  {nldata.map(item => (
                                    <p style={{marginLeft: 8,marginTop:10 }}>{item.x}：<span style={{color: '#009900'}}>{item.y}</span> 人 </p>
                                  ))}
                                  </div>
                              </Card>
                          </div>
                          <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                              <Card title="统计表">
                                  <Table columns={nlcolumns} dataSource={nldata}/>
                              </Card>
                          </div>
                        </TabPane>
                        <TabPane tab="警衔" key="4">
                          <div style={{float: 'left',width: '50%'}}>
                              <div>人数</div>
                              <PoliceCharts data={jxdataBar} text="队伍情况分析" defs={defs}  column={jxcolumnBar}  type={["histogram"]} height={280} txlx ='group' />
                          </div>
                          <div style={{float: 'right',width: '50%'}}>
                              <PieCharts data={jxdata} text="领导班子分析" />
                          </div>
                          <div style={{float: 'left',width: '49%',marginTop: '50px'}}>
                              <Card title="文本描述">
                                  <div style={{marginLeft: 20}}>
                                  <h3>警衔情况：</h3>
                                  {jxdata.map(item => (
                                    <p style={{marginLeft: 8,marginTop:10 }}>{item.x}：<span style={{color: '#009900'}}>{item.y}</span> 人 </p>
                                  ))}
                                  </div>
                              </Card>
                          </div>
                          <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                              <Card title="统计表">
                                  <Table columns={jxcolumns} dataSource={jxdata}/>
                              </Card>
                          </div>
                        </TabPane>
                        <TabPane tab="学历" key="5">
                          <div style={{float: 'left',width: '50%'}}>
                              <div>人数</div>
                              <PoliceCharts data={xldataBar} text="队伍情况分析" defs={defs}  column={xlcolumnBar}  type={["histogram"]} height={280} txlx ='group' />
                          </div>
                          <div style={{float: 'right',width: '50%'}}>
                              <PieCharts data={xldata} text="领导班子分析" />
                          </div>
                          <div style={{float: 'left',width: '49%',marginTop: '50px'}}>
                              <Card title="文本描述">
                                  <div style={{marginLeft: 20}}>
                                  <h3>警衔情况：</h3>
                                  {xldata.map(item => (
                                    <p style={{marginLeft: 8,marginTop:10 }}>{item.x}：<span style={{color: '#009900'}}>{item.y}</span> 人 </p>
                                  ))}
                                  </div>
                              </Card>
                          </div>
                          <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                              <Card title="统计表">
                                  <Table columns={xlcolumns} dataSource={xldata}/>
                              </Card>
                          </div>
                        </TabPane>
                      </Tabs>
                </div>

            </div>
        </Card>

    </PageHeaderWrapper>
		);
	}
}

export default ProLeaderDrawList;
